<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/base.css">
    <style>
        #myCanvas {
            /* background-color: darkgray; */
            border: 1px #ddd solid;
        }

        #my_img {
            width: 470px;
            height: 300px;
        }
    </style>

</head>

<body>

    <div id="app">
        <canvas id="myCanvas" style="display: block;"></canvas>

        <div>

            <button id="abc">获取图片</button>

            <img src="" id="my_img" alt="">
        </div>



    </div>



    <script>
        var Point = function (x, y) {
            return {
                x: x,
                y: y
            };
        };

        function drawRoundedRect(rect, r, ctx) {
            var ptA = Point(rect.x + r, rect.y);
            var ptB = Point(rect.x + rect.width, rect.y);
            var ptC = Point(rect.x + rect.width, rect.y + rect.height);
            var ptD = Point(rect.x, rect.y + rect.height);
            var ptE = Point(rect.x, rect.y);

            ctx.beginPath();

            ctx.moveTo(ptA.x, ptA.y);
            ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
            ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
            ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);
            ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);

            ctx.stroke();

        }

        function Rect(x, y, w, h) {
            return {
                x: x,
                y: y,
                width: w,
                height: h
            };
        }


        function drawing(config) {

            config = config || getUrlParamsMap();
            option = {};

            console.log(config, "========config===========");

            option.e_width = parseInt(config['e_width'] || '150');
            option.e_height = parseInt(config['e_height'] || '120');

            option.margin_left = parseInt(config['margin_left'] || '10');
            option.margin_top = parseInt(config['margin_top'] || '10');

            option.row_num = parseInt(config['row_num'] || '3');
            option.column_num = parseInt(config['column_num'] || '2');

            option.paper_width = option.e_width * option.column_num + option.margin_left * (option.column_num + 1);
            option.paper_height = (option.e_height + option.margin_top) * 3 + option.margin_top;

            option.shortRuleWidth = 8


            var c = document.getElementById("myCanvas");

            console.log(option, "========option===========");
            c.width = option.paper_width;


            c.height = option.paper_height;


            var ctx = c.getContext("2d");

            var rect = Rect(50, 50, 300, 200);
            drawRoundedRect(rect, 25, ctx);


            ctx.fillStyle = "#ddd";
            ctx.fillRect(0, 0, option.paper_width, option.paper_height);


            var startPoint = {
                x: 0,
                y: 0
            };



            for (var i = 0; i < option.row_num; i++) {

                startPoint.y = startPoint.y + option.margin_top;
                startPoint.x = 0;


                for (var k = 0; k < option.column_num; k++) {

                    startPoint.x = startPoint.x + option.margin_left;

                    ctx.moveTo(startPoint.x, startPoint.y);

                    ctx.fillStyle = "#FFF";
                    ctx.fillRect(startPoint.x, startPoint.y, option.e_width, option.e_height);


                    startPoint.x = startPoint.x + option.e_width;

                }
                startPoint.y = startPoint.y + option.e_height;

            }



            ctx.translate(0.5, 0.5);
            ctx.lineWidth = 0.5;
            ctx.strokeStyle = "#FF0000";
            ctx.beginPath();

            var drawLine = [];

            //宽线
            drawLine.push({
                startX: option.margin_left,
                startY: option.margin_top + option.e_height - option.shortRuleWidth / 2,
                toX: option.margin_left + option.e_width,
                toY: option.margin_top + option.e_height - option.shortRuleWidth / 2
            });

            //宽线左
            drawLine.push({
                startX: option.margin_left,
                startY: option.margin_top + option.e_height - option.shortRuleWidth,
                toX: option.margin_left,
                toY: option.margin_top + option.e_height
            });

            //宽线右
            drawLine.push({
                startX: option.margin_left + option.e_width,
                startY: option.margin_top + option.e_height - option
                    .shortRuleWidth,
                toX: option.margin_left + option.e_width,
                toY: option.margin_top + option.e_height
            });


            //高线
            drawLine.push({
                startX: option.margin_left + option.shortRuleWidth / 2,
                startY: option.margin_top * 2 + option.e_height,
                toX: option.margin_left + option.shortRuleWidth / 2,
                toY: (option.margin_top + option.e_height) * 2
            });

            //高线上
            drawLine.push({
                startX: option.margin_left,
                startY: option.margin_top * 2 + option.e_height,
                toX: option.margin_left + option.shortRuleWidth,
                toY: option.margin_top * 2 + option.e_height
            });

            //高线下
            drawLine.push({
                startX: option.margin_left,
                startY: (option.margin_top + option.e_height) * 2,
                toX: option.margin_left + option
                    .shortRuleWidth,
                toY: (option.margin_top + option.e_height) * 2
            });

            //行间距上
            drawLine.push({
                startX: option.margin_left + option.shortRuleWidth * 2,
                startY: (option.margin_top + option.e_height) * 2,
                toX: option.margin_left + option.shortRuleWidth * 3,
                toY: (option.margin_top + option.e_height) * 2
            });

            //行间距线下
            drawLine.push({
                startX: option.margin_left + option.shortRuleWidth * 2,
                startY: (option.margin_top + option.e_height) * 2 + option.margin_top,
                toX: option.margin_left + option.shortRuleWidth * 3,
                toY: (option.margin_top + option.e_height) * 2 + option.margin_top
            });

            //行间距线
            drawLine.push({
                startX: option.margin_left + option.shortRuleWidth * 2.5,
                startY: (option.margin_top + option.e_height) * 2,
                toX: option.margin_left + option.shortRuleWidth * 2.5,
                toY: (option.margin_top + option.e_height) * 2 + option.margin_top
            });

            //列间距左
            drawLine.push({
                startX: option.margin_left + option.e_width,
                startY: option.margin_top + option.e_height - option.shortRuleWidth * 3,
                toX: option.margin_left + option.e_width,
                toY: option.margin_top + option.e_height - option.shortRuleWidth * 2
            });

            //列间距右
            drawLine.push({
                startX: option.margin_left * 2 + option.e_width,
                startY: option.margin_top + option.e_height - option.shortRuleWidth * 3,
                toX: option.margin_left * 2 + option.e_width,
                toY: option.margin_top + option.e_height - option.shortRuleWidth * 2
            });

            //列间距线
            drawLine.push({
                startX: option.margin_left + option.e_width,
                startY: option.margin_top + option.e_height - option.shortRuleWidth * 2.5,
                toX: option.margin_left * 2 + option.e_width,
                toY: option.margin_top + option.e_height - option.shortRuleWidth * 2.5
            });



            for (var i = 0; i < drawLine.length; i++) {
                ctx.moveTo(drawLine[i].startX, drawLine[i].startY);
                ctx.lineTo(drawLine[i].toX, drawLine[i].toY);
            }



            ctx.stroke();
            ctx.restore();





            ctx.fillStyle = "red";
            ctx.font = '12px "微软雅黑"';
            ctx.textBaseline = "top";
            ctx.textAlign =
                "center";
            ctx.fillText("宽" + option.e_width + "毫米", option.e_width / 2 + option.margin_left, option
                .margin_top + option.e_height);

            ctx.fillStyle = "red";
            ctx.font = '12px "微软雅黑"';
            // ctx.textBaseline = "bottom";
            ctx.textAlign =
                "start";
            ctx.fillText("高" + option.e_height + "毫米", option.margin_left + option.shortRuleWidth, option.e_height / 2 +
                option.e_height +
                option.margin_top * 2);


            ctx.fillStyle = "red";
            ctx.font = '12px "微软雅黑"';
            ctx.textBaseline = "top";
            ctx.textAlign =
                "start";
            ctx.fillText("行间距" + option.margin_top + "毫米", option.margin_left + option.shortRuleWidth * 4, (option
                .e_height + option.margin_top) * 2);

            ctx.fillStyle = "red";
            ctx.font = '12px "微软雅黑"';
            ctx.textBaseline = "middle";
            ctx.textAlign =
                "right";
            ctx.fillText("列间距" + option.margin_left + "毫米", option.margin_left + option.e_width - option
                .shortRuleWidth /
                2, option.margin_top + option
                .e_height - option.shortRuleWidth * 2.5);





        }

        document.getElementById("abc").onclick = function () {
            var canvas = document.getElementById("myCanvas");
            var strDataUrl = canvas.toDataURL("image/jpeg", 1.0);
            document.getElementById('my_img').src = strDataUrl;
        }

        function getUrlParamsMap() {
            var url = location.search; //获取url中"?"符后的字串
            var map = {};
            if (url.indexOf("?") != -1) {
                var str = url.split('?')[1];
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    map[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return map;
        }

        drawing();

        document.getElementById("abc").click();
    </script>

</body>

</html>